<template>
  <div class="content-wrapper">
    <ul>
      <div class="input-item">
        <input class="text-input" v-model="phone" placeholder="输入您的手机号" />
      </div>
      <div class="input-item">
        <input class="text-input short-input" v-model="code" placeholder="输入短信验证码" />
        <div @click="sendVerifyCode" v-if="isEnabled" class="text-input msg-btn">获取验证码</div>
        <div v-else class="text-input msg-btn">{{ waitingTime }}秒后再发送</div>
      </div>
      <div class="input-item">
        <input :type="pwdType" v-model="password" class="text-input" placeholder="输入您的登陆密码" />
        <img class="pwd-eye" src="../../assets/icon/icon_eye.png" @click='switchPwdType'  alt="" />
      </div>
      <div class="input-item">
        <input :type="pwdType" v-model="confirmPassword" class="text-input" placeholder="再次输入登陆密码" />
      </div>
    </ul>
    <div class="button-wrapper">
      <button type="button" @click="register" class="btn btn-large btn-red">提交注册</button>
    </div>
    <div class="link-wrapper">
      <router-link to="login" class="right-link">已有账号去登陆>></router-link>
    </div>
    <div class="third-account">
      <p>使用其他第三方账号登陆</p>
      <div class="logos">
        <img src="../../assets/img/img_logo_wechat.png" />
      </div>
    </div>
    <div id="footer-obj" :class="['footer-wrapper', hideFooter ? 'hide' : '']">
      <span>注册即代表同意<router-link to="agreement" class="ehance-text">《书画点评网用户服务协议》</router-link></span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

export default {
  name: 'Register',
  data () {
    return {
      phone: '',
      code: '',
      password: '',
      confirmPassword: '',
      pwdType: 'password',
      waitingTime: 0,
      isEnabled: true,
      hideFooter: false,
      pageHeight: document.body.clientHeight
    }
  },
  created() {
    this.setFooter()
  },
  methods: {
    switchPwdType: function() {
      if (this.pwdType == 'password') {
        this.pwdType = 'text'
      } else {
        this.pwdType = 'password'
      }
    },
    register: function() {
      if (!this.phone) {
        return this.$toast.fail('请输入手机号')
      }
      if (!this.code) {
        return this.$toast.fail('请输入验证码')
      }
      if (!this.password || this.password.length < 6) {
        return this.$toast.fail('请输入符合要求的密码')
      }
      if (this.password != this.confirmPassword) {
        return this.$toast.fail('两次输入的密码不一致')
      }
      // 转菊花
      this.$toast.loading({ duration: 0 })
      var that = this
      var params = {
        'phone': this.phone,
        'password': this.password,
        'code': this.code
      }
      this.axios.post('/users/register/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          that.$toast.success('账号注册成功')
          that.$router.replace('/login')
        } else {
          that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
        if (error.response) {
          that.$toast.fail(error.response.data.message)
        } else {
          that.$toast.fail('账号注册失败')
        }
      })
    },
    timeCount () {
      var that = this
      setTimeout(() => {
        that.waitingTime --
        if (!that.waitingTime) {
          that.isEnabled = true
        } else {
          // 循环
          that.timeCount()
        }
      }, 1000)
    },
    sendVerifyCode: function() {
      if (!this.phone) {
        return this.$toast.fail('请先输入手机号')
      }
      var params = {
        'phone': this.phone,
        'is_register': true
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      this.axios.post('/system/sms/verify_mobile_phone/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          // 启动倒计时
          that.isEnabled = false
          that.waitingTime = 90
          that.timeCount()
          that.$toast.success('短信验证码已发送')
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        that.$toast.fail('请求出错')
      })
    },
    setFooter: function() {
      var that = this
      window.onresize = function() {
        if (that.pageHeight > document.body.clientHeight) {
          that.hideFooter = true
        } else {
          that.hideFooter = false
        }
      }
    }
  }
}

</script>

<style lang="scss">
@import '../../assets/style/account.scss'
</style>
